
<template>
  <div>
    <!-- 配额总览 -->
    <a-row>
      <a-col :md="12" class="quotaOverview">
        <a-row>
          <a-col :md="24" class="quota">
            <div class="top">
              <div class="val">-- 元</div>
              <div class="title h4"><a-icon type="credit-card" theme="twoTone" />配额总量</div>
            </div>
          </a-col>
          <a-col :md="12" class="quota">
            <div class="bg">
              <div class="val">-- 元</div>
              <div class="title"><a-icon type="credit-card" theme="twoTone" />冻结配额</div>
            </div>
          </a-col>
          <a-col :md="12" class="quota">
            <div class="bg">
              <div class="val">-- 元</div>
              <div class="title"><a-icon type="credit-card" theme="twoTone" />可用配额</div>
            </div></a-col
          >
        </a-row>
      </a-col>
      <a-col :md="12" class="Structure_box_right">
        <div class="tltle">归属组织</div>
        <div>
          <!-- <Pie></Pie> -->
        </div>
      </a-col>
    </a-row>
    <!-- 分配/交易配额 -->
    <a-row>
      <a-col :md="12" class="module">
        <div class="tltle">近5年分配配额 单位：tCO₂e</div>
        <div class="distribution">
          <ul>
            <li v-for="(item, index) in distribution" :key="index">
              <div>
                {{ item.name }}<span v-if="index == 0" class="forecast">预测<a-icon type="swap-right" /></span>
              </div>
              <div>{{ item.value }}</div>
            </li>
          </ul>
        </div>
      </a-col>
      <a-col :md="12" class="module">
        <div class="tltle">交易配额 <a-icon type="exclamation-circle" /> &nbsp;&nbsp;单位：tCO₂e</div>
        <div>
          <a-empty :description="false" />
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :md="12" class="module">
        <div class="tltle">冻结配额 单位：tCO₂e</div>
        <a-row>
          <a-col :md="8" class="bottom_quotas">
            <div class="name"><a-icon type="smile" theme="twoTone" />政策冻结</div>
            <div class="val">0</div>
          </a-col>
          <a-col :md="8" class="bottom_quotas">
            <div class="name"><a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" />抵押冻结</div>
            <div class="val">0</div></a-col
          >
          <a-col :md="8" class="bottom_quotas">
            <div class="name"><a-icon type="heart" theme="twoTone" two-tone-color="#eb2f96" />交易冻结</div>
            <div class="val">0</div>
          </a-col>
        </a-row>

        <!-- <div>政策冻结 抵押冻结 交易冻结</div> -->
      </a-col>
      <a-col :md="12" class="module">
        <div class="tltle">预测配额 单位：tCO₂e</div>
        <a-row>
          <a-col :md="8" class="bottom_quotas">
            <a-dropdown>
              <a class="ant-dropdown-link flex_" @click.prevent>
                <div class="title">填报时间</div>
                <div class="select">2021年度</div>
                <a-icon type="down" />
              </a>
              <template #overlay>
                <a-menu @click="onClick">
                  <a-menu-item key="1">2021年度</a-menu-item>
                  <a-menu-item key="2">2021年度</a-menu-item>
                  <a-menu-item key="3">2021年度</a-menu-item>
                  <a-menu-item key="4">2021年度</a-menu-item>
                  <a-menu-item key="5">2021年度</a-menu-item>
                  <a-menu-item key="6">2021年度</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-col>
          <a-col :md="8" class="bottom_quotas">
            <div class="name"><a-icon type="smile" theme="twoTone" />排放量</div>
            <div class="val">0</div>
          </a-col>
          <a-col :md="8" class="bottom_quotas">
            <div class="name"><a-icon type="heart" theme="twoTone" two-tone-color="#eb2f96" />预测配额盈亏</div>
            <div class="val">0</div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// import Pie from '@/components/chart/Pie'
export default {
  components: {
    // Pie,
  },
  data() {
    return {
      distribution: [
        { name: '2022年', value: '暂无' },
        { name: '2021年', value: '暂无' },
        { name: '2020年', value: '暂无' },
        { name: '2019年', value: '暂无' },
        { name: '2018年', value: '暂无' },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.bottom_quotas {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  .name {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .anticon {
      font-size: 22px;
      margin-right: 6px;
    }
  }
  .val {
    font-size: 22px;
    margin-top: 2px;
    font-weight: 600;
  }
}
// 配额总览
.quotaOverview {
  background: url('@/assets/img/assets/bg_1.png');
  background-size: cover;
  padding: 20px;
  .quota {
    height: 80px;
    .top {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .bg {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(233, 237, 241, 0.2);
    }
    .title {
      font-size: 12px;
    }
    .h4 {
      font-size: 16px;
    }
    .val {
      margin-top: 6px;
      font-size: 12px;
    }
    .anticon {
      margin-right: 6px;
    }
  }
}
// 分配/交易
.distribution {
  display: flex;
  flex-direction: row;
  // width: 100%;
  padding: 0 20px;
  ul {
    padding: 0;
    width: 100%;
    margin-top: 10px;
    li {
      list-style: none;
      border-bottom: 1px solid #e7e7e7;
      padding: 10px 0px;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      justify-content: flex-start;
      div {
        width: 50%;
        font-size: 12px;
      }
      .forecast {
        padding: 4px 10px;
        color: rgba(12, 103, 238, 0.5);
        margin-left: 10px;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid rgba(12, 103, 238, 0.5);
        .anticon {
          margin-left: 6px;
          font-weight: 600;
          font-size: 16px;
          color: rgba(12, 103, 238, 0.5);
        }
      }
    }
  }
}
</style>